<template>
  <teleport to="body">
    <!-- 遍历所有活跃的弹窗 -->
    <div v-for="popup in visiblePopups" :key="popup.id" :class="['popup-wrapper', `popup-${popup.type}`]" :style="getPopupStyle(popup)">
      <!-- 监测数据弹窗 -->
      <MonitorDataPopup v-if="popup.type === 'MONITOR'" :data="popup.data" @close="() => hidePopup(popup.id)" />

      <!-- 报警信息弹窗 -->
      <AlarmInfoPopup v-else-if="popup.type === 'GAOJINGTYPE'" :data="popup.data" :title="popup.title" @close="() => hidePopup(popup.id)" />

      <!-- 预警信息弹窗 -->
      <WarningPopup v-else-if="popup.type === 'WARING'" :data="popup.data" :title="popup.title" @close="() => hidePopup(popup.id)" />
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { globalPopupManager, type PopupData } from '@/hooks/usePopupManager';
import MonitorDataPopup from './components/MonitorDataPopup.vue';
import AlarmInfoPopup from './components/AlarmInfoPopup.vue';
import WarningPopup from './components/WarningPopup.vue';

const { state, hidePopup } = globalPopupManager;

// 获取所有可见的弹窗
const visiblePopups = computed(() => {
  return Array.from(state.activePopups.values()).filter((popup) => popup.visible);
});

// 获取弹窗样式
const getPopupStyle = (popup: PopupData) => {
  const style: any = {
    position: 'fixed',
    zIndex: popup.zIndex || 1000
  };

  // 如果有位置信息，使用固定定位跟在点位旁边
  if (popup.position) {
    style.left = `${popup.position.x + 20}px`; // 点位右侧偏移20px
    style.top = `${popup.position.y - 10}px`; // 点位上方偏移10px
  } else {
    // 默认位置
    style.left = '50%';
    style.top = '50%';
    style.transform = 'translate(-50%, -50%)';
  }

  return style;
};
</script>

<style scoped lang="scss">
.popup-wrapper {
  animation: popup-fade-in 0.3s ease-out;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.3));

  &.popup-device-detail {
    max-width: 600px;
  }

  &.popup-MONITOR {
    max-width: 800px;
  }

  &.popup-alarm-info {
    max-width: 500px;
  }

  &.popup-WARING {
    max-width: 750px;
  }

  &.popup-GAOJINGTYPE {
    max-width: 700px;
  }
}

.popup-close-btn {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  &:hover {
    background: rgba(255, 255, 255, 1);
    color: #ef4444;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
  }

  .el-icon {
    font-size: 16px;
  }
}

@keyframes popup-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
</style>
